/* 查看数据页面js */
/* 根据每个题目每个选项的选择次数与总选择测试的比率展示 */

// 获取标题框
const titleText = document.getElementsByClassName("title")[0]
/* 题目内容·区域 */
const content = document.getElementsByClassName("content")[0]
/* 返回按钮 */
const back = document.getElementsByClassName("back")
var count = 0
// 题目索引
var subjectIndex = 0
// 题目索引
var subjectId = 0
// 存储题目
var subject=[]
var innerSubject = ''
/* 添加单选题 */
// single.onclick = singlefun()
function singlefun(){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
        '<div class="titles">'+
            'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType"></p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle"  readonly="true" value="单选题目">'+'<div class="proportion">数据占比</div>'+
        '</div>'+
        '<div class="choses">'+
            '<div class="checkbox01">'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项1" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">0x%</p><div class="inner"></div></div></div>'+
            '</div>'+
            '<div class="checkbox01">'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项2" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">1x%</p><div class="inner"></div></div></div>'+
            '</div>'+
        '</div>'+
    '</div>'
    play()
    
}

/* 添加多选题 */
function mutiplefun(){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
       '<div class="titles">'+
       'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType"></p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle" readonly="true" value="多选题目">'+'<div class="proportion">数据占比</div>'+
        '</div>'+
        '<div class="choses">'+
            '<div class="checkbox01">'+   
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项1" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">0x%</p><div class="inner"></div></div></div>'+
            '</div>'+
            '<div class="checkbox01">'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项2" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">1x%</p><div class="inner"></div></div></div>'+
            '</div>'+
            '<div class="checkbox01">'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项3" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">2x%</p><div class="inner"></div></div></div>'+
            '</div>'+
            '<div class="checkbox01">'+
                '<span class="radioInput"></span><input type="text" class="subjectChose" value="选项4" readonly="true" >'+'<div class="outerWrapper"><div class="outer"><p class="per">3x%</p><div class="inner"></div></div></div>'+
            '</div>'+
        '</div>'+
    '</div>'
    play()
    
}

/* 添加文本题 */
function textfun(){
    if(count===10){
        alert("问题数量超过限制")
        return
    }
    count++
    subjectIndex++
    subject [subject.length] = 
    '<div class="contents">'+
        '<div class="titles">'+
        'Q<p class="id">'+(subjectIndex)+'</p><p class="subjectType"></p>&nbsp;&nbsp;&nbsp;<input type="text" class="subjectTitle" readonly="true"  value="文本题目">'+'<div class="proportion">有效回答占比</div>'+
        '</div>'+
        '<div class="outerWrapper"><div class="outer"><p class="per">100%</p><div class="inner"></div></div></div>'+
    '</div>'
    play()
}

let lookObj;
let lookId = localStorage.getItem("look-id")
for(var lookArr of Arr){
    if(lookArr.id===lookId){
        lookObj = lookArr;
        look(lookArr);
    }
}


// 点查看数据进来的编辑页面
function look(lookArr){
    // 将标题 题目 选项 截止日期等设置为不可修改
    titleText.readOnly=true
    
    titleText.value=lookArr.title
    // 先建问题类型呈现在页面
    if(lookArr.questions){
        for(let j=0;j<lookArr.questions.length;j++){
            // console.log(j);
            // 保证按原先顺序
            if(lookArr.questions[j].type==="单选题"){
                singlefun()
                subject[j] = subject[j].replace("单选题目",lookArr.questions[j].questionTitle)
                const checkboxs = document.getElementsByClassName("contents")[j].getElementsByClassName("subjectChose")
                let answerSum = 0;
                for(w=0;w<lookArr.questions[j].answer.length;w++){
                    answerSum = answerSum + parseInt(lookArr.questions[j].answer[w])
                }
                // console.log(answerSum);
                for(let z=0;z<checkboxs.length;z++){
                    /* 计算百分比 */
                    subject[j] = subject[j].replace("选项"+(z+1),lookArr.questions[j].options[z])
                    subject[j] = subject[j].replace(z+"x%",parseInt(lookArr.questions[j].answer[z]/answerSum*100)+"%")
                }
            }
            if(lookArr.questions[j].type==="多选题"){
                mutiplefun()
                subject[j] = subject[j].replace("多选题目",lookArr.questions[j].questionTitle)
                const checkboxs = document.getElementsByClassName("contents")[j].getElementsByClassName("subjectChose")
                let answerSum = 0;
                for(w=0;w<lookArr.questions[j].answer.length;w++){
                    answerSum = answerSum + parseInt(lookArr.questions[j].answer[w])
                }
                // console.log(answerSum);
                for(let z=0;z<checkboxs.length;z++){
                    let test = z+1;
                    subject[j] = subject[j].replace("选项"+(z+1),lookArr.questions[j].options[z])
                    subject[j] = subject[j].replace(z+"x%",parseInt(lookArr.questions[j].answer[z]/answerSum*100)+"%")
                }
            }
            if(lookArr.questions[j].type==="文本题"){
                textfun()
                subject[j] = subject[j].replace("文本题目",lookArr.questions[j].questionTitle)
                subject[j] = subject[j].replace("请输入文本题目",lookArr.questions[j].text)
                if(lookArr.questions[j].check){
                    // console.log(j);
                    // subject[j] = subject[j].replace(">&nbsp;","checked>&nbsp;")
                }
            }
            play()          
        }
    }   
}
function play(){
    innerSubject=''
    for(let i=0; i<subject.length;i++){
        innerSubject +=subject[i]
    }
    content.innerHTML = innerSubject 
    for(let i=0;i<document.getElementsByClassName("contents").length;i++){
        document.getElementsByClassName("contents")[i].getElementsByClassName("id")[0].textContent=i+1
    }
    // showData();
}

/* 返回按钮 */
for(let i = 0;i<back.length;i++){
    back[i].onclick = function(){
        localStorage.removeItem("look-id");
        str="../index.html"
        window.location.href = str
    }
}
/* 设置百分比条 */
const outer = document.getElementsByClassName("outer");
for(let i=0;i<outer.length;i++){
    let length = outer[i].getElementsByClassName("per")[0].innerHTML.split("%")[0]
    outer[i].getElementsByClassName("inner")[0].style.width = length+"%"
}
